import React, { useEffect, useState  , Key} from 'react'
import { Button, Form, Input, Table, Card ,Tooltip, message} from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { useNavigate } from 'react-router-dom';
import style from './index.module.css'

//引入Api:
import {
  getHosSetListRequest,            //获取医院列表请求 
  deleteHosSetRequest,             //删除医院请求
  deletaAllHosSetRequest           //批量删除医院请求
} from "@api/hospital/hospitalSet"

import type {
  getHosSetListRecordsType,             //获取医院列表请求返回值中数组的类型
  getHosSetListItemsType,               //数组的每一项的类型
} from "@api/hospital/model/hospitalSetTypes"

import type {searchHosHandleParamsType} from './types' //点击查询函数的参数类型


export default function HospitalSet() {
  //使用编程式路由导航 点击添加或修改的时候 切换路由
  const navigate = useNavigate()

  //医院设置页面初始数据:
  const [hospitalList, setHospitalList] = useState<getHosSetListRecordsType>([]) //初始数组
  const [total, setTotal] = useState(0)       //初始总数据
  const [current, setCurrent] = useState(1)   //初始当前页
  const [pageSize, setPageSize] = useState(10) //初始每页条数
  const [isLoading , setIsloading] = useState(false) //设置页面加载的时候转圈圈
  const [finishValue , setFinishValue] = useState<searchHosHandleParamsType>({}) //收集表单数据
  
  //保存状态 删除之后重新渲染页面
  const [deleteRender , setDeleteRender] = useState(true)

  //保存状态 控制批量删除按钮的禁用  默认禁用 多选框被选择了就解除
  const [disabled , setDisabled] = useState(true)

  //把多选框拿到的ids保存在状态中 批量删除请求需要
  const [ids , setIds] = useState<Key[]>([])



  //刚加载组件的时候就请求数据渲染页面
  useEffect(() => {
    //在请求开始之前设置isLoading为true 开始转圈圈
    setIsloading(true)

    //useEffect的一个参数不能是异步函数,所以封装函数发送请求
    const getHosSetList = async () => {
      const re = await getHosSetListRequest({
        page: current,
        limit: pageSize,
        ...finishValue
      })
      //请求回来数据直接修改到对应的状态中渲染页面
      setHospitalList(re.records);    //设置数据
      setTotal(re.total)              //设置数据的总条数

      //请求完成之后设置为false  停止转圈圈
      setIsloading(false)
    }
    getHosSetList()
  }, [current , pageSize , finishValue , deleteRender ])


  const columns = [
    {
      title: '序号',
      aligin: "center" as "center", //居中
      dataIndex: 'index',  //dataIndex可以代替key
      width: 60,           //列的宽度
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      aligin: "center" as "center", //居中
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      aligin: "center" as "center", //居中
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
      aligin: "center" as "center", //居中
    },
    {
      title: '签名',
      dataIndex: 'signKey',
      aligin: "center" as "center", //居中
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
      aligin: "center" as "center", //居中
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
      aligin: "center" as "center", //居中
    },
    {
      title: '操作',
      dataIndex: "do",
      aligin: "center" as "center", //居中
      width: 120,                  //列的宽度
      fixed: "right" as "right",    //固定最右边一列
      render(_:any , data:getHosSetListItemsType) {
        const {id} = data  //根据第二个参数获取当前这一行数据对应的唯一的id 把id传给修改页面
        return (
          <div>
            {/* 修改逻辑 */}
            <Tooltip title={"修改医院"}>
              <Button 
                type='primary' 
                icon={<EditOutlined />} 
                className={style.mr}
                //修改请求去修改页面
                onClick = {() => navigate(`/syt/hospital/updatehospital/${id}`)}
              ></Button>
            </Tooltip>

            <Tooltip title={"删除医院"}>
            {/* 删除逻辑 */}
            <Button 
              type='primary' 
              danger 
              icon={<DeleteOutlined />}
              //删除请求传递id
              onClick = {deleteHospitalHandle(id)}
            ></Button>
            </Tooltip>
          </div >
        )
      }
    }
  ];


  //1.分页的 当前页或者pageSize改变的回调函数
  const setPageHandle = (current:number , pageSize:number) => {
    setCurrent(current)
    setPageSize(pageSize)
  }

  //2.点击查询的回调函数
  const searchHosSetHandle = (finishValue:searchHosHandleParamsType) => {
    setFinishValue(finishValue)
  }


  //3.点击清空的回调函数
  const clearHandle = () => {
    //改变状态查询渲染
    setFinishValue({})
  }


  //4.点击添加的回调函数
  const addHosSetHandle = () => {
    //点击添加去添加页面
    navigate("/syt/hospital/addhospital")
  }


  //6.点击删除的回调函数
  const deleteHospitalHandle = (id:number) => {
    //返回的函数才是事件函数
    return async () => {
      //发送请求
      await deleteHosSetRequest(id);

      //删除成功提示
      message.success("删除成功!");

      //重新渲染页面
      setDeleteRender(!deleteRender);

    }
  }


  //7.点击批量删除的回调函数
  const deleteAllHandel = async () => {
    //发送批量删除请求
    await deletaAllHosSetRequest(ids);

    //批量删除成功提示
    message.success("批量删除成功!");

    //重新渲染页面
    setDeleteRender(!deleteRender);

    //把批量删除按钮改回禁用状态
    setDisabled(true);

  }


  return (
    <div className={style.outer}>
      <Card>

        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout='inline'
          onFinish={searchHosSetHandle}
        >
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder='医院编号' />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <Button type="default" htmlType="reset" onClick = {clearHandle}>
              清空
            </Button>
          </Form.Item>

        </Form>

        <div className={style.mt}>
          <Button type='primary' className={style.mr} onClick = {addHosSetHandle}>添加</Button>
          <Button type="primary" danger disabled = {disabled} onClick = {deleteAllHandel}>批量删除</Button>
        </div>

        <Table
          columns={columns}        //列
          dataSource={hospitalList}  //每列数据
          className={style.mt}     //上边距
          scroll={{ x: 1300 }}     //横向滚动条长度
          bordered                 //边框
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"

          //页面加载时候的动画
          loading = {isLoading}

          //开启多选框
          rowSelection = {{
            //多选框改变事件 
            onChange(ids:Key[]){
              //监听只要有选中的就解除批量删除按钮的禁用状态
              ids.length > 0 ? setDisabled(false) : setDisabled(true)

              //拿到选中的数据的id保存在状态中 等下发送批量删除请求要用
              setIds(ids)
            }
          }}

          //分页器
          pagination={{
            //页码的配置：当前页码
            current,
            //总数据的数量
            total,
            //每页条数
            pageSize,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [2, 3, 4, 5],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            //显示总数据条数
            showTotal(total) {
              return `数据总共有${total}条`
            },

            //页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
            onChange: setPageHandle

          }}
        />
      </Card>
    </div>
  )
}
